<template>
    <div class="confirmContainer">
        <div class="confirmContent">
            <div class="back" @click="goBack"></div>
            <p class="title">确认订单</p>
            <div class="other"></div>
        </div>
        <div class="addressContent">
            <div class="addressImg"></div>
            <div class="userInfo">
                <div class="user">
                    <p class="name">{{ user.consignee }}</p>
                    <p class="phone">{{ user.phone }}</p>
                </div>
                <p class="address">{{ user.provinceName }}{{ user.cityName }}{{ user.districtName }}{{ user.detail }}</p>
            </div>
            <div class="change" @click="gotoChange">修改</div>
        </div>
        <ul class="allStores">
            <li v-for="store in stores" :key="store.id">
                <div class="storeContainer">
                    <div class="storeContent">
                        <div class="store">
                            <div class="storeImg"></div>
                            <div class="storeName">旗舰店</div>
                        </div>
                        <div class="goodInfoContent">
                            <div class="goodImg" :style="goodImg(store.id)"></div>
                            <div class="goodInfo">
                                <p class="goodTitle">{{ store.name }} {{ store.description }}</p>
                                <p class="goodNum">{{ store.goodType }} {{ store.goodNum }}</p>
                                <div class="price">
                                    <p class="index">￥</p>
                                    <p class="beforeNum">{{ store.amount }}</p>
                                </div>
                            </div>
                        </div>
                        <p class="goodCount">×{{ store.number }}</p>
                    </div>
                    <div class="moreInfo">
                        <div class="allPriceContent">
                            <p class="allPrice moreTitle">商品总价</p>
                            <div class="allPriceNum">
                                <p class="allIndex">￥</p>
                                <p class="allNum">{{ store.amount*store.number }}</p>
                            </div>
                        </div>
                        <div class="favorContent">
                            <p class="favor moreTitle">使用优惠券</p>
                            <div class="favorPriceNum">
                                <p class="favorIndex">-￥</p>
                                <p class="favorNum">{{ 20 }}</p>
                            </div>
                        </div>
                        <div class="transportContent">
                            <p class="transport moreTitle">运费</p>
                            <p class="ifFree">包邮</p>
                        </div>
                        <div class="payContent">
                            <p class="moreTitle">付款</p>
                            <div class="payPrice">
                                <p class="payIndex">￥</p>
                                <p class="payNum">{{ (store.amount*store.number-20).toFixed(2) }}</p>
                            </div>
                        </div>
                        <div class="idContent">
                            <p class="id moreTitle">订单号</p>
                            <p class="idNum">{{orderNumber}}</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="methodContainer">
            <div class="weixin">
                <div class="weixinContent">
                    <div class="weixinImg"></div>
                    <p class="weixinTitle">微信支付</p>
                </div>
                <div class="notCheck" v-if="weixinCheck" @click="ifWeixin"></div>
                <div class="check" v-if="!weixinCheck" @click="ifWeixin"></div>
            </div>
            <div class="zhifubao">
                <div class="zhifubaoContent">
                    <div class="zhifubaoImg"></div>
                    <p class="zhifubaoTitle">支付宝支付</p>
                </div>
                <div class="notCheck" v-if="zhifubaoCheck" @click="ifZhifubao"></div>
                <div class="check" v-if="!zhifubaoCheck" @click="ifZhifubao"></div>
            </div>
        </div>
        <div class="notesContainer">
            <div class="notes">
                <p class="notesTitle">订单备注</p>
                <div class="service">
                    <p class="chooseService">选择服务</p>
                    <div class="gotoService"></div>
                </div>
            </div>
        </div>
        <div class="allPay">
            <div class="payNumContainer">
                <p class="all">合计</p>
                <p class="allPayIndex">￥</p>
                <p class="allPayNum">{{ payNum }}</p>
                <div class="gotoPay" @click="gotoConfirm">确认支付</div>
            </div>
        </div>
        <van-popup closeable v-model="show" round position="bottom" :style="{ height: '40%' }">
            <div class="payContainer">
                <div class="payContent">
                    确认收款
                </div>
                <p class="allPayPrice">￥<span>{{ payNum }}</span></p>
                <div class="payInfo">
                    <div class="payIdContainer">
                        <p class="payId">订单编号</p>
                        <p class="payIdContent">{{ payId }}</p>
                    </div>
                    <div class="payWayContainer">
                        <p class="payWay">付款方式</p>
                        <p class="payWayContent">{{ payWay }}</p>
                    </div>
                </div>
                <div class="instantPay" @click="gotoStore">立即付款</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import { Popup } from 'vant';
    import axios from 'axios';
    export default {
        name:'confirmOrder',
        components:{
            'van-popup':Popup
        },
        data(){
            return{
                show:false,
                weixinCheck:false,
                zhifubaoCheck:true,
                orderNumber:this.$route.params.order.orderNumber,
                user:{},
                stores:[
                    {name:'旗舰店',goodTitle:'低糖水果 蓝莓西柚 现摘现发 新鲜水果',goodType:'蓝莓',goodNum:'3斤',goodPrice:100.99,goodCount:1,favor:12.00,ifFree:'包邮',id:987654312122930},
                    {name:'旗舰店',goodTitle:'低糖水果 蓝莓西柚 现摘现发 新鲜水果',goodType:'蓝莓',goodNum:'3斤',goodPrice:100.99,goodCount:1,favor:12.00,ifFree:'包邮',id:987654312122931}
                ]
            }
        },
        methods:{
            goBack(){
                axios({
                    url:'http://localhost:8080/polycystic/order/unPayment',
                    method:'put',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                    data:{
                        addressBookId:this.user.id,
                        payMethod:this.checkMethod(),
                        freight:0,
                        remark:'',
                        orderNumber:this.orderNumber
                    }
                })
                this.$router.back()
            },
            checkMethod(){
                if(this.weixinCheck==true){
                    return 1
                }
                else{
                    return 2
                }
            },
            gotoStore(){
                axios({
                    url:'http://localhost:8080/polycystic/order/payment',
                    method:'put',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                    data:{
                        addressBookId:this.user.id,
                        payMethod:this.checkMethod(),
                        freight:0,
                        remark:'',
                        orderNumber:this.orderNumber
                    }
                })
                this.$router.replace({
                    name:'store'
                })
            },
            gotoChange(){
                this.$router.push({
                    name:'myOrder'
                })
            },
            ifWeixin(){
                this.weixinCheck=!this.weixinCheck
                if(this.zhifubaoCheck===false && this.weixinCheck===false){
                    this.zhifubaoCheck=true
                }
            },
            ifZhifubao(){
                this.zhifubaoCheck=!this.zhifubaoCheck
                if(this.zhifubaoCheck===false && this.weixinCheck===false){
                    this.weixinCheck=true
                }
            },
            gotoConfirm(){
                if(this.payNum>0){
                    this.show=true
                }
            },
            goodImg(id){
                for(let i=0;i<this.stores.length;i++){
                    if(id==this.stores[i].id){
                        return `backgroundImage:url(${this.stores[i].image})`
                    }
                }
            }
        },
        computed:{
            payNum(){
                let num=0;
                for(let i=0;i<this.stores.length;i++){
                    num+=(this.stores[i].amount*this.stores[i].number-20)
                }
                return num.toFixed(2);
            },
            payId(){
                return this.stores[0].id
            },
            payWay(){
                if(!this.weixinCheck){
                    return '微信支付'
                }
                else if(!this.zhifubaoCheck){
                    return '支付宝支付'
                }
                else{
                    return ''
                }
            }
        },
        mounted(){
            axios({
                method:'get',
                url:'http://localhost:8080/polycystic/addressBook/default',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                this.user=res.data.data
            })
            console.log(this.$route.params.order);
            this.stores=this.$route.params.order.list
        },
        beforeDestroy(){
            this.$bus.$off('changeAddress')
        }
    }
</script>

<style scoped>
    .confirmContainer{
        width: 100vw;
        height: 100vh;
        overflow-x:hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .confirmContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left:.32rem;
        z-index: 1;
        background-color: #F6F8FA;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .other{
        width: .32rem;
        height: .72rem;
    }
    .addressContent{
        background-color: #FFF;
        width: 6.86rem;
        margin-left: .32rem;
        border-radius: .3rem;
        height: 1.6rem;
        position: relative;
        overflow: hidden;
        margin-top: 1.76rem;
    }
    .addressImg{
        width: .48rem;
        height: .48rem;
        background-image: url(../assets/img/6-icon@2x/6-17address.png);
        background-position: center;
        background-size: contain;
        margin-left: .2rem;
        margin-top: .3rem;
        float: left;
    }
    .userInfo{
        display: flex;
        flex-direction: column;
        margin-left: .2rem;
        float: left;
    }
    .user{
        float: left;
        display: flex;
        align-items: center;
        margin-top: .3rem;
        color: #333333;
    }
    .name{
        font-family: 'PingFangSC-Mediuem';
        font-size: 16px;
    }
    .phone{
        font-family: 'PingFangSC-Regular';
        margin-left: .1rem;
    }
    .address{
        color:#333333;
        margin-top: .2rem;
        font-family: 'PingFangSC-Regular';
        font-size: 13px;
    }
    .change{
        position: absolute;
        right: .2rem;
        top:40%;
        font-family: 'PingFangSC-Regular';
        color: #33333371;
        font-size: .26rem;
        width: .7rem;
        height: .44rem;
        border: .02rem solid #33333371;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: .4rem;
    }
    .storeContainer{
        margin-top: .2rem;
        width: 6.86rem;
        margin-left: .32rem;
        background-color: #FFF;
        border-radius: .3rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .storeContainer>div{
        width: 6.46rem;
    }
    .storeContent{
        margin-top: .2rem;
        width: 100%;
        position: relative;
    }
    .store{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .storeImg{
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/tab+logo@2x/3.1store.png);
        width: .5rem;
        height: .5rem;
    }
    .storeName{
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
        margin-left: .2rem;
        font-size: .32rem;
    }
    .goodInfoContent{
        margin-top: .2rem;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .goodImg{
        width: 2.2rem;
        height: 2.2rem;
        background-color: #F6F8FA;
        border-radius: .2rem;
        background-position: center;
        background-size: cover;
    }
    .goodInfo{
        margin-left: .2rem;
        width: 4rem;
    }
    .goodTitle{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .28rem;
        margin-bottom: 10px;
    }
    .goodNum{
        font-family: 'PingFangSC-Regular';
        color:#33333376;
        font-size: .26rem;
    }
    .price{
        display: flex;
        align-items: end;
        margin-top: .2rem;
    }
    .index{
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
    }
    .beforeNum{
        font-family: 'PingFangSC-Bold';
        font-size: .32rem;
    }
    .goodCount{
        position: absolute;
        right: 0;
        bottom: 9px;
        font-family: 'PingFangSC-Regular';
        color:#33333376;
        font-size: .26rem;
    }
    .moreInfo{
        margin-top: 35px;
        width: 100%;
    }
    .moreInfo>div{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: .2rem;
    }
    .moreTitle{
        font-family: 'PingFangSC-Regular';
        color:#333333;
        font-size: .28rem;
    }
    .allPriceNum{
        display: flex;
        align-items: end;
        font-family: 'PingFangSC-Regular';
        color:#33333376;
        font-size: .26rem;
    }
    .favorPriceNum{
        display: flex;
        align-items: end;
        font-family: 'PingFangSC-Regular';
        color:#33333376;
        font-size: .26rem;
    }
    .ifFree{
        font-family: 'PingFangSC-Regular';
        color:#33333376;
        font-size: .26rem;
    }
    .payPrice{
        display: flex;
        align-items: end;
    }
    .payIndex{
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
        color:#FB4866;
    }
    .payNum{
        font-family: 'PingFangSC-Bold';
        font-size: .32rem;
        color:#FB4866;
    }
    .idNum{
        font-family: 'PingFangSC-Regular';
        color:#33333376;
        font-size: .26rem;
    }
    .methodContainer{
        width: 6.86rem;
        margin-left: .32rem;
        background-color: #FFF;
        border-radius: .3rem;
        margin-top: .2rem;
        overflow: hidden;
    }

    .weixin{
        width: 6.46rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .3rem;
    }
    .weixinContent{
        display: flex;
        align-items: center;
    }
    .weixinImg{
        width: .48rem;
        height: .48rem;
        border-radius: .1rem;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-15weixin.png);
    }
    .weixinTitle{
        font-family: 'PingFangSC-Regular';
        color:#333333;
        margin-left: .2rem;
    }
    .notCheck{
        width: .4rem;
        height: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-13notCheck.png);
    }
    .check{
        width: .4rem;
        height: .4rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-14check.png);
    }
    .zhifubao{
        width: 6.46rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .3rem;
        margin-bottom: .3rem;
    }
    .zhifubaoContent{
        display: flex;
        align-items: center;
    }
    .zhifubaoImg{
        width: .48rem;
        height: .48rem;
        border-radius: .1rem;
        background-position: center;
        background-size: contain;
        background-image: url(../assets/img/6-icon@2x/6-16zhifubao.png);
    }
    .zhifubaoTitle{
        font-family: 'PingFangSC-Regular';
        color:#333333;
        margin-left: .2rem;
    }
    
    .notesContainer{
        width: 6.86rem;
        margin-left: .32rem;
        background-color: #FFF;
        border-radius: .3rem;
        margin-top: .2rem;
        overflow: hidden;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
    }
    .notes{
        width: 6.46rem;
        height: 50px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .notesTitle{
        font-family: 'PingFangSC-Regular';
        color:#333333;
    }
    .service{
        display: flex;
        align-items: center;
    }
    .chooseService{
        font-family: 'PingFangSC-Regular';
        color:#33333376;
        font-size: .26rem;
    }
    .gotoService{
        width: .32rem;
        height:.32rem;
        background-image: url(../assets/img/6-icon@2x/back.png);
        background-position: center;
        background-size: contain;
        transform: rotateY(180deg) scale(0.7);
        opacity: 0.4;
    }
    .allPay{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .payNumContainer{
        width: 6.86rem;
        margin: 0 auto;
        color:#FB4866;
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .all{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
    }
    .allPayIndex{
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
        margin-left: .1rem;
    }
    .allPayNum{
        font-family: 'PingFangSC-Bold';
        font-size: .32rem;
        margin-right: .1rem;
    }
    .gotoPay{
        width: 2rem;
        height: .7rem;
        border-radius: .7rem;
        background-color: #FB4866;
        color:#FFF;
        font-family: 'PingFangSC-Regular';
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .payContainer{
        width: 6.38rem;
        margin: 0 auto;
        margin-top: .4rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .payContent{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        font-size: .32rem;
    }
    .allPayPrice{
        width: 100%;
        display: flex;
        align-items: end;
        justify-content: center;
        margin-top: .4rem;
        font-size: .28rem;
        color:#333333;
        font-family: 'PingFangSC-Bold';
    }
    .allPayPrice span{
        font-size: .45rem;
    }
    .payInfo{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: .8rem;
    }
    .payInfo div{
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #d1d1d142;
    }
    .payId,.payWay{
        color:#999999;
        font-family: 'PingFangSC-Regular';
        font-size: .28rem;
    }
    .payIdContent,.payWayContent{
        font-family: 'PingFangSC-Regular';
        color:#333333;
        font-size: .28rem;
    }
    .instantPay{
        margin-top: .6rem;
        width: 100%;
        height: .8rem;
        background-color: #FB4866;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#FFF;
        font-family: 'PingFangSC-Regular';
        border-radius: .8rem;
    }
</style>
